<template>
	<view class="container">
		<!-- 首页  -->
			<!-- <search @gosearchPost="gosearchPost"></search> -->
			<view class="tui-searchbox" @click="gosearchPost">
				<view class="tui-search-input">
					<icon type="search" :size='13' color='#0068ff' ></icon> 
					<view class="tui-input">
						输入关键字搜索
					</view>
					<icon type="clear" :size='13' color='#bcbcbc' @tap="cleanKey" v-show="key"></icon>
				</view>
			</view>
			<carousel :swiper="swiper" :classify="classify" :headlines="headlines" v-if="swiper && classify && headlines"></carousel>
			<card v-if="post.length !== 0" :postsRecord="post" :uid="uid" :cangodetail="cangodetail" :isshowcomment="isshowcomment"></card>
			
		<!-- </view> -->
		
		  
		<!-- <view class="p-content">
			 <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true" class="my-square" v-if="!phone">
				 <image src="/static/images/icon/home_go_post.png" mode="aspectFill"></image>
				 <view class="">打卡</view>
			 </button>
			 <view class="my-square" @click="goto('/pages/post/index')" v-else>
				<image src="/static/images/icon/home_go_post.png" mode="aspectFill"></image>
				<view class="">打卡</view>
			 </view>
		 </view> -->
	</view>
</template>

<script>

import api from '../../common/api.js'
import {mapState} from 'vuex'
import Vue from 'vue'

import carousel from './comps/carousel.vue'
import search from './comps/search'
import card from '../../components/common/card.vue'
	
export default {
	data() {
		return {
			flag:false, 
			boolShow:false,
			post:[],				//热门打卡数据
			me:[],					//用户信息
			page:1,					//热门打卡页数
			limit:10,				//热门打卡单页数据
			isshowcomment:1,//是否展示评论数据
			uid:null,			  //当前登录用户id
			unread:null,		//未读通知条数
			ifOnShow:false, 
			swiper:[],			//首页轮播
			classify: [],		//首页导航
			headlines: [],	//首页公告
			cangodetail:1,	//打卡是否能跳转到详情页
			tabClick: false // true 表示是两次点击中的第一次点了 tabBar
		};
	},
	
	computed:mapState(['phone']),
	
	components: {
		carousel,
		search,
		card,
	},
	
	async onLoad() {//await 是把异步的请求变成同步的执行
		// await this.asyncUserData()
		await this.getMe()	
		await this.getNotices(1)
		await this.getAppnavs()
		await this.getSwiper(5)
		this.post = await this.fetch(this.page,this.limit)
	},
	
	async onShow() {//头像改变，父组件刷新热门打卡
		var _that = this
		uni.$off('changeavatar')
		uni.$on('changeavatar' ,async function() {
			_that.post = await _that.fetch(_that.page, _that.limit)
		})
	},
	
	async updated() {//更新热门打卡
		var _that = this
		uni.$off('updateHotpostComment')
		uni.$once('updateHotpostComment',(comment_item,index) => {
			console.log('更新下评论好不好');
			// _that.post =  await _that.fetch(_that.page,_that.limit)
			_that.post[index].commented += 1
			_that.post[index].hot_comments.unshift(comment_item)
		})
		uni.$off('updateHotPost')
		uni.$on('updateHotPost',async function(index,item) {//点赞，更新热门打卡
			if(item.userliked){
				console.log('userliked');
			  item.liked --
			  item.userliked = false
				item.likers.splice(item.likers.indexOf(item.likers.find(el => { return el.id == _that.me.id} )),1)
			  let res = await  api.UnLikePost(item.id)
			  _that.post[index] = item
				
			}else{
				console.log('userunliked');
			  item.liked ++
			  item.userliked = true
			  let res  = await  api.LikePost(item.id)
				item.likers.push(_that.me)
			  _that.post[index] = item
				
			}
		})
	},
			
	async onReachBottom() {//上拉加载更多
		let list = await this.fetch(this.page+1,this.limit)
		if(list && list.length>0){
			this.page ++
			this.post.push(...list)
		}else{
			uni.showToast({ title:'没有更多了', icon: "none" ,duration:800});
		}
	},
	
	async onPullDownRefresh() {//下拉刷新
		this.page = 1
		await this.getSwiper(5)
		await this.getAppnavs()
		this.post = await this.fetch(this.page,this.limit)
		uni.stopPullDownRefresh()
	},
	
	onShareAppMessage: function(res) {
		return {
			title: Vue.prototype.share_title,
			path: '/pages/index/index',
			imageUrl: Vue.prototype.share_cover,
		}
	},
		 
	methods: {
		
		async fetch(page,limit){//获取热门打卡数据
			return await api.GetHotPost(page,limit)
		},
		
		async getSwiper(limit) {//获取轮播图数据
			this.swiper = await api.GetSwiper(limit)
		},
		
		async getNotices(limit) {//获取首页公告数据
			this.headlines = await api.GetNotices(1)
		},
		
		async getAppnavs() {//获取首页快捷选项
			this.classify = await api.GetAppnavs(4)
		},
		
		goto(url) {//相关页面跳转
			uni.navigateTo({
				url
			})
		},
		
		
		async getMe() {// 获取当前登录用户信息
			let res = await api.GetMe()
			this.$store.commit('setPhone',res[0].phone)
			this.had_phone = res[0].purePhoneNumber
			this.uid = res.map(item => item.id)
			this.me = res[0]
			this.flag = true //确保子组件能获取到数据
		},
		
		async getPhoneNumber (e) {//手机号授权
		　　if(e.detail.errMsg=="getPhoneNumber:ok"){
		      let res = await api.GetUserPhone(e.detail.encryptedData,e.detail.iv)
					let sres = await api.SetUserPhone(res.purePhoneNumber)
					if(sres.err == 0) {
						this.$store.commit('setPhone',res.purePhoneNumber)
						this.goto('/pages/post/index')
						uni.showToast({
							title:sres.msg,
							duration:800
						})
					}
			}else{
		        console.log('用户拒绝了手机号授权') ;   
		    }
		},
		
		gosearchPost(val) {
			console.log('=============',val);
			uni.navigateTo({
				url:'comps/searchresult?content=' + val +'&uid=' + this.uid
			})
		}
		// async asyncUserData(infoRes) {
		// 	let res = await api.AsyncUserData(infoRes)
		// 	console.log(res);
		// },
		
		// asyncUserData(){ //同步用户个人信息
		// 	var that = this
		// 	uni.getUserInfo({
		// 	  provider: 'weixin',
		// 	  success:  (infoRes) => {
		// 		this.AsyncUserData(infoRes)
		// 		console.log(infoRes);
		// 	  },fail: function (infoRes){
		// 	  	that.isguest = true
		// 	  }
		// 	});
		// },
	}
};
</script>

<style lang="scss" scoped>

page {
	background: #eee;
}


.tui-searchbox {
	padding: 30rpx 20rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	// padding: 0 30rpx 30rpx 30rpx;
	box-sizing: border-box;
}

.tui-search-input {
	width: 100%;
	height: 66rpx;
	border-radius: 35rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #f2f2f2;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

.tui-input {
	flex: 1;
	color: #999;
	padding: 0 16rpx;
	font-size: 28rpx;
	
}

.tui-input-plholder {
	font-size: 28rpx;
	color: #b2b2b2;
}

.tui-cancle {
	color: #888;
	font-size: 28rpx;
	padding-left: 30rpx;
	flex-shrink: 0;
}

.tui-history-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;
}
.tui-history-content{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.tui-icon-delete {
	padding: 10rpx;
}

.tui-search-title {
	font-size: 28rpx;
	font-weight: bold;
}

.tui-hot-header {
	padding: 30rpx 0;
}

.tui-header {
	padding: 26rpx 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tui-header-left {
	font-size: 30rpx;
	color: #222;
	border-left: 4rpx solid #EB0909;
	padding-left: 10rpx;
	word-break: break-all;
}

.tui-noboredr {
	border-left: 0 !important;
}

.tui-result-box {
	font-size: 28rpx;
}

.tui-result-item {
	line-height: 28rpx;
	padding: 28rpx 0;
}

.index,.square,.activity {
	padding-bottom: 155rpx;
}

.header {
	padding: 80rpx 90rpx 60rpx 90rpx;
	box-sizing: border-box;
}

.title {
	font-size: 34rpx;
	color: #333;
	font-weight: 500;
}

.sub-title {
	font-size: 24rpx;
	color: #7a7a7a;
	padding-top: 18rpx;
}

.tui-mtop {
	margin-top: 80rpx;
}
.tui-image{
	width: 100%;
	height: auto;
}
.popup {
	width: 750rpx;
	color: #fff;
	font-size: 34rpx;
	margin: 0 auto;
	.p-content {
		display: flex;
		margin: 0 auto;	
		position: relative;
		width: 750rpx;
		height: 350rpx;
		background: rgba(175, 176, 178, .9);
		// border-radius: 30rpx 30rpx 0 0;
		border-top-left-radius: 1000rpx 160rpx;
		border-top-right-radius: 1000rpx 160rpx;
		justify-content: space-evenly;
		align-items: center;
		button {
			padding: 0;
			margin: 0;
			background: transparent;
			color: #fff;
			// display: flex;
			// align-items: center;
			font-size: 32rpx;
		}
		image {
			width: 70rpx;
			height: 70rpx;
		}
		
		.my-square,.create {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 120rpx;
			height: 120rpx;
			font-size: 26rpx;
		}
		
	}
	

}
</style>
